<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>tab栏</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0px;
      padding: 0px;
      border: 0px;
    }

    .tab {
      width: 60%;
      margin: 50px auto;
      border: 1px solid black;
    }

    .tag {
      display: flex;
      width: 100%;
    }

    .tag>.item {
      width: 33.3%;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: gray;
      height: 50px;
      color: white;
    }

    .tag>.selected {
      width: 33.3%;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 50px;
    }

    .content {
      width: 100%;
      height: 200px;
      border-top: 0px;
    }

    .content>div {
      display: none;
    }
  </style>
</head>

<body>
  <div class="tab">
    <div class="tag" id="tag">
      <div class="item">
        <span>tag1</span>
      </div>
      <div class="item">
        <span>tag2</span>
      </div>
      <div class="item">
        <span>tag3</span>
      </div>
    </div>
    <div class="content" id="content">
      <div class="item">
        <span>content1</span>
      </div>
      <div class="item">
        <span>content2</span>
      </div>
      <div class="item">
        <span>content3</span>
      </div>
    </div>
  </div>
  <script>
    var tag = document.getElementById('tag').getElementsByTagName('div')
    var content = document.getElementById('content').getElementsByTagName('div')
    console.log(tag)
    for (var i = 0; i < tag.length; i++) {
      var li = tag[i];
      li.id = i;
      li.onmousemove = function () {
        for (var j = 0; j < tag.length; j++) {
          tag[j].className = 'item';
          content[j].style.display = 'none';
        }
        this.className = 'selected';
        content[this.id].style.display = 'block';
      }
    }
  </script>
  <!--
    获取元素：
      document.getElementById(id)	通过元素 id 来查找元素
      document.getElementsByTagName(name)	通过标签名来查找元素
      document.getElementsByClassName(name) 通过类名来查找元素
    改变 HTML 元素：
      element.attribute = new value	改变 HTML 元素的属性值
      element.style.property = new style	改变 HTML 元素的样式
    鼠标事件监听：
      element.onmousemove = function ()
    其他常用事件：
      onchange	HTML 元素已被改变
      onclick	用户点击了 HTML 元素
      onmouseover	用户把鼠标移动到 HTML 元素上
      onmouseout	用户把鼠标移开 HTML 元素
      onkeydown	用户按下键盘按键
      onload	浏览器已经完成页面加载
  -->
</body>

</html>